<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预览PPT - <span th:text="${pptName}"></span></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .viewer-container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .viewer-header {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .viewer-header h4 {
            margin: 0;
            color: white;
        }
        .viewer-content {
            flex: 1;
            overflow: hidden;
            position: relative;
            background: white;
        }
        .btn-back {
            background-color: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
        }
        .btn-back:hover {
            background-color: rgba(255,255,255,0.3);
            color: white;
        }
        .viewer-fallback {
            padding: 50px;
            text-align: center;
            background: white;
            margin: 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="viewer-container">
        <div class="viewer-header">
            <h4><i class="fa fa-file-powerpoint-o"></i> <span th:text="${pptName}"></span></h4>
            <div>
                <a th:href="@{/ppt/list}" class="btn btn-back">
                    <i class="fa fa-arrow-left"></i> 返回PPT列表
                </a>
            </div>
        </div>
        <div class="viewer-content">
            <!-- 尝试直接打开文件 -->
            <div class="viewer-fallback">
                <h4><i class="fa fa-file-powerpoint-o" style="font-size: 3em; color: #ff6b6b; margin-bottom: 20px;"></i></h4>
                <h4>PPT文件预览</h4>
                <p class="text-muted" style="margin: 20px 0;">
                    浏览器正在尝试打开PPT文件。如果文件自动下载，请点击下方按钮查看。
                </p>
                <div style="margin-top: 30px;">
                    <a th:href="@{${fileUrl}}"
                       target="_blank"
                       class="btn btn-primary btn-lg"
                       style="margin-right: 10px;">
                        <i class="fa fa-external-link"></i> 在新标签页打开
                    </a>
                    <a th:href="@{/ppt/download(pptId=${pptId})}"
                       class="btn btn-success btn-lg"
                       style="margin-right: 10px;">
                        <i class="fa fa-download"></i> 下载文件
                    </a>
                    <a th:href="@{/ppt/list}" class="btn btn-default btn-lg">
                        <i class="fa fa-arrow-left"></i> 返回PPT列表
                    </a>
                </div>
                <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
                    <p class="text-muted">
                        <small>
                            <i class="fa fa-info-circle"></i>
                            提示：PPT文件需要在Microsoft PowerPoint或其他兼容软件中打开查看。
                            某些浏览器可能支持在线预览，如果不支持，请下载后使用专业软件打开。
                        </small>
                    </p>
                </div>
            </div>

            <!-- 尝试使用iframe直接嵌入（某些浏览器可能支持） -->
            <iframe class="viewer-iframe"
                    th:src="@{${fileUrl}}"
                    style="display: none;"
                    id="viewerFrame"
                    frameborder="0">
            </iframe>
        </div>
    </div>

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        (function() {
            var fileUrl = /*[[${fileUrl}]]*/ '';
            var iframe = document.getElementById('viewerFrame');

            var fileName = fileUrl.toLowerCase();
            var isPPT = fileName.endsWith('.ppt') || fileName.endsWith('.pptx');

            if (isPPT) {
                console.log('PPT file detected. Most browsers will download instead of preview.');
            }
        })();
        /*]]>*/
    </script>
</body>
</html>

